<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl" style="color: #4e598c">
        功能点击数汇总
      </div>
    </div>
    <div class="md:flex">
      <Form :model="formState" ref="formRef" class="md:flex-row w-full flex-wrap" v-bind="formItemLayout">
        <div class="md:flex w-full md:justify-between">
          <Col :span="5">
            <FormItem name="stepType" label="应用">
              <div class="md:w-30">
                <Select 
                  v-model:value="appId" 
                  placeholder="请选择应用" 
                  :options="appOptions" 
                  :allowClear="true">
                </Select>
              </div>
            </FormItem>
          </Col>
          <Col :span="4">
            <FormItem>
              <div class="md:flex md:justify-end">
                <Button type="primary" shape="circle" @click="onSubmit">
                  <template #icon><SearchOutlined /></template>
                </Button>
                <Button style="margin-left: 5px" shape="circle" @click="resetForm">
                  <template #icon> <RedoOutlined /> </template>
                </Button>
              </div>
            </FormItem>
          </Col>
        </div>
      </Form>
    </div>
    <div class="md:flex">
      <div :id="functionClicksSummaryBar" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import { Button, Col, Form, FormItem, Select, Card } from 'ant-design-vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import { 
  FuncClicksSummaryDto, 
  FunctionClicksSummaryParams 
} from '/@/api/operation-center/app-operation/function-analysis/model/functionAnalysisModel';
import { getFunctionClicksSummary } from '/@/api/operation-center/app-operation/function-analysis/functionAnalysis';
import { AppTemplateResp } from '/@/api/operation-center/common/model/commonModel';
import { getAppSelectList } from '/@/api/operation-center/common/common';

const formRef = ref();

const formState = reactive<Record<string, any>>({});

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};

const functionClicksSummaryBar = 'function-clicks-summary-bar-chart';

var option: any;

// Select 组件属性设置
const appId = ref();
const appOptions = ref<any[]>([]);

let functionNameList: string[] = [];
let functionClicksList: number[] = [];

function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  res.forEach((item) => {
    options.push({
      label: item.name,
      value: item.id,
    });
  });
  appOptions.value = options;
}

function converToFuncBarChartData(res: FuncClicksSummaryDto[]) {
  res.forEach((item) => {
    functionNameList.push(item.functionName);
    functionClicksList.push(item.num);
  })
}

function initBarChart(barChartName: string, yAxisData: string[], seriesData: number[], option: any) {
  let barDom = document.getElementById(barChartName);
  let myChart = echarts.init(barDom);

  option = {
    tooltip: {
      trigger: 'axis', 
      axisPointer: {
        type: 'shadow', 
      }, 
    }, 
    grid: {
      left: '5%', 
      bottom: '0%', 
      top: '0%', 
      containLabel: true, 
    }, 
    xAxis: {
      type: 'value', 
      show: true, 
      axisLabel: {
        formatter: '{value}', 
        show: true, 
      }, 
      axisLine: {
        show: true, 
      }, 
    }, 
    yAxis: [
      {
        type: 'category', 
        data: yAxisData, 
      }
    ], 
    series: [
      {
        data: seriesData, 
        type: 'bar',  
      }, 
    ]
  };

  option && myChart.setOption(option);
}

const onSubmit = async () => {
  formRef.value.validate().then(() => {
    let functionClicksSummaryParams: FunctionClicksSummaryParams = { appId: appId.value };

    getFunctionClicksSummary(functionClicksSummaryParams).then((res) => {
      converToFuncBarChartData(res);

      setTimeout(()=>{
        initBarChart(functionClicksSummaryBar, functionNameList, functionClicksList, option);
      }, 300);
    });
  })
}

// 清空表单参数
const resetForm = () => {
  appId.value = undefined;
  appOptions.value = [];
};

onMounted(() => {
  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});

</script>
